<script setup lang="ts">
import http from '@/http';
import { onMounted, ref } from 'vue';


//当前页的页号发生改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`)
  //重新获取当前页的数据
  pageNum.value = val
  page()
}
//获取药品类型
let dictLabelData = ref([])
const fetchDictData = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    dictLabelData.value = res
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};
//his_medicines_type
let dictLabel1Data = ref([])
const fetchDictData2 = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    dictLabel1Data.value = res
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};
//获取生产厂家
let producterNameList = ref([])
http.get('producter/getName').then((res) => {
  producterNameList.value = res
});
//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(5)
//总条数
let total = ref(0)
//条件
let purchaseId=ref('')
let medicinesName = ref('')
let medicinesType = ref('')
let producterId = ref('')
let prescriptionType = ref('')
let createTime=ref('')

//表格数据
let MedDate = ref([])

const handleSizeChange = (val: number) => {
  pageSize.value = val;
    page();
};
//获取数据
function page() {
    http.get('pur/getPurItems', {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            purchaseId: purchaseId.value,
            medicinesName: medicinesName.value,
            medicinesType: medicinesType.value,
            producterId: producterId.value,
            prescriptionType: prescriptionType.value,
            createTime: createTime.value
           
        }
    }).then((res) => {
        MedDate.value = res.list
        total.value = res.total
    });
}
  onMounted(() => {
    page();
    fetchDictData("his_medicines_type")
    fetchDictData2("his_prescription_type")
  });
  function search() {
    page();
  }
  function reset() {
    medicinesName.value = ''
    medicinesType.value = ''
    producterId.value = ''
    prescriptionType.value = ''
    createTime.value = ''
    page();
  }



  </script>

<template>
    <el-container>
      <el-header> 
        <el-row >
            <el-col :span="5">
          <div class="grid-content ep-bg-purple" >
        采购单据号    <el-input v-model="purchaseId" placeholder="采购单据号" style="width: 120px;"></el-input>
        </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content ep-bg-purple" >
       药品名称    <el-input v-model="medicinesName" placeholder="药品名称" style="width: 120px;"></el-input>
        </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" >
        药品类型   
          <el-select v-model="medicinesType" placeholder="请选择" style="width: 100px;">
            <el-option
              v-for="item in dictLabelData"
              :label="item.dict_label"
                    :value="item.dict_value"
                    :key="item.dict_value">
            </el-option>
          </el-select>
        
        </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" >
        生产厂家
          <el-select v-model="producterId" placeholder="请选择" style="width: 100px;" >
            <el-option
              v-for="pro in producterNameList"
              :label="pro.producterName"
              :value="pro.producterId"
              :key="pro.producterId">
            </el-option>
          </el-select>
        </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" >
        处方类型  
          <el-select v-model="prescriptionType" placeholder="请选择" style="width: 100px;">
            <el-option
              v-for="dict in dictLabel1Data"
              :label="dict.dict_label"
                    :value="dict.dict_value"
                    :key="dict.dict_value">
            </el-option>
          </el-select>
        </div>
        </el-col>
    </el-row>     
     <el-row>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
       创建时间    <el-input v-model="createTime" placeholder="请输入" style="width: 120px;"></el-input>
        </div>
        </el-col>
                <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button type="primary" icon="search" @click="search" width="100px">搜索</el-button>
              </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button  icon="Refresh" @click="reset" width="100px">重置</el-button>
             </div>
          </el-col>
      </el-row>
     
       
      </el-header>
  
      <el-main>
        <el-table :data="MedDate" style="width: 100%;margin-top: 40px;" row-key="medicinesId" border >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="medicinesId" label="药品id" align="center"  width="80"></el-table-column>
            <el-table-column prop="medicinesName" label="药品名称" align="center" width="200"></el-table-column>
            <el-table-column prop="purchaseNumber" label="采购数量" align="center" width="100"></el-table-column>
            <el-table-column prop="tradePrice" label="批发价" align="center" width="100"></el-table-column>
            <el-table-column prop="tradeTotalAmount" label="批发额" align="center"width="100" ></el-table-column>
            <el-table-column prop="batchNumber" label="批次号" align="center" width="100"></el-table-column>
            <el-table-column prop="producterName" label="生产厂家" align="center" width="300"></el-table-column>
            <el-table-column prop="medicinesName" label="药品类型" align="center"width="130" />
            <el-table-column prop="prescriptionType" label="处方类型" align="center" width="120">
                <template #default="scope">
                    <span v-if="scope.row.prescriptionType == 1">中药处方</span>
                    <span v-else>西药处方</span>
                </template>
            </el-table-column>
        </el-table>
                 <!--分页-->
  <el-row style="margin-top: 20px;">
    <el-col :span="12" :offset="6">
      <div class="demo-pagination-block">
         <el-pagination
        @size-change="handleSizeChange"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 5, 8, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
      </div>
    </el-col>
  </el-row>
      </el-main>
    </el-container>
  </template>
  <style scoped>
  .el-header {
    background-color: #f5f7fa;
    padding: 20px;
  }
  .el-dialog__body {
  padding: 20px;
}
  </style>